<template>
    <app-layout>
        <view v-if="loading">
            <view>
                <app-quick-navigation></app-quick-navigation>
            </view>

            <view>
                <app-goods-banner
                    :pic-list="detail.pic_url"
                    :share="detail.share"
                    :video-url="detail.video_url"
                    :goods_id="detail.id"
                    :isCart="false"
                ></app-goods-banner>
            </view>

            <view class="goods-name t-omit-two">{{detail.name}}</view>
            <view class="price" v-if="detail">
                <app-goods-price
                    @quickShare="quickShare"
                    :discount='discount'
                    :shareUrl="shareUrl"
                    :is_vip_card_user="is_vip_card_user"
                    :goods="detail"
                    :select-attr="selectAttr"
                    :is_show_member="false"
                ></app-goods-price>
            </view>
            <view class="vip-card" v-if="is_vip">
                <app-vip-card background="#fff" top="0"></app-vip-card>
            </view>
            <view class="rule">
                <view class="content dir-left-nowrap main-between" @click="back">
                    <view class="dir-left-nowrap cross-center">
                        <view class="tag">N元任选</view>
                        <view class="activity-price">{{activity.rule_price}}元选{{activity.rule_num}}件</view>
                    </view>
                    <view class="dir-left-nowrap go cross-center">
                        <view>去凑单</view>
                        <image src="/static/image/icon/arrow-right.png"></image>
                    </view>
                </view>
            </view>
            <view class="merchant-guarantee" v-if="detail.services.length>0">
                <app-goods-service :border="false" :list="detail.services"></app-goods-service>
            </view>
            <view class="attr" >
                <app-attr
                        :goods="detail"
                        :attrGroupList="detail.attr_groups"
                        :show="attrShow"
                        @attrtap="onAttr"
                        @add="add"
                        :is_show_buy="false"
                        addText="加入凑单池"
                >
                    <view slot="button">
                        <app-goods-attr :attr-groups="detail.attr_groups" :selectAttr="selectAttr" :attr="detail.attr"></app-goods-attr>
                    </view>
                </app-attr>
            </view>

            <view class="marketing" v-if="detail">
                <app-goods-marketing
                        :limit="detail.goods_marketing.limit"
                        :express="detail.express"
                        :shipping="detail.goods_marketing.shipping"
                        :pickup="detail.goods_marketing.pickup"
                        :card="detail.goods_marketing_award.card"
                        :integral="detail.goods_marketing_award.integral"
                ></app-goods-marketing>
            </view>

            <view v-if="detail">
                <app-goods-detail :goods="detail"></app-goods-detail>
            </view>
            <view class="recommend">
                <app-goods-recommend :is_show_member="false" :sureCart="false" :goods-list="recommend_list" :activity="activity"></app-goods-recommend>
            </view>
            <view>
                <app-empty-bottom :height="Number(110)"></app-empty-bottom>
            </view>
            <view>
                <app-iphone-x>
                    <view class="app-bottom dir-left-nowrap" slot="empty-area">
                        <view class="dir-top-nowrap main-center cross-center little box-grow-0" @click="back">
                            <image src="/static/image/icon/index.png"></image>
                            <view>首页</view>
                        </view>
                        <view class="dir-top-nowrap main-center cross-center little box-grow-0" @click="favorite">
                            <image :src="detail.favorite ? '/static/image/icon/icon-favorite-active.png' : '/static/image/icon/icon-favorite.png'"></image>
                            <view>收藏</view>
                        </view>
                        <view class="box-grow-1 dir-left-nowrap" style="height: 100%;" v-if="detail.goods_num == 0">
                            <view style="width: 100%;background-color: #CDCDCD;color: #fff;" class="main-center cross-center button">已售罄</view>
                        </view>
                        <view class="box-grow-1 dir-left-nowrap" style="height: 100%;" v-else>
                            <template v-if="activity_status === 1">
                                <view style="background-color: #f39800;" class="secondary-background main-center cross-center button"
                                      @click="clickAttr(1)">
                                    加入凑单池
                                </view>
                                <view class="background main-center cross-center button"
                                      style="background-color: #ff4544;"
                                      @click="clickAttr"
                                >返回凑单池
                                </view>
                            </template>
                            <template v-else>
                                <view class="background main-center cross-center button"
                                      style="background-color: #999999;width: 100%"
                                >活动已结束
                                </view>
                            </template>
                        </view>
                    </view>
                </app-iphone-x>
            </view>
        </view>
    </app-layout>
</template>

<script>
    import appQuickNavigation from "../../../components/page-component/app-quick-navigation/app-quick-navigation.vue";
    import appGoodsBanner from "../../../components/page-component/goods/app-goods-banner";
    import appGoodsPrice from "../../../components/page-component/goods/app-goods-price";
    import appGoodsAttr from "../../../components/page-component/goods/app-goods-attr";
    import appAttr from "../../../components/page-component/app-attr/app-attr";
    import appGoodsMarketing from "../../../components/page-component/goods/app-goods-marketing";
    import appJumpButton from "../../../components/basic-component/app-jump-button/app-jump-button";
    import appGoodsList from "../../../components/page-component/app-goods-list/app-goods-list";
    import appService from "../../../components/page-component/goods/app-goods-service";
    import appGoodsDetail from "../../../components/page-component/goods/app-goods-detail";
    import appGoodsRecommend from "../../../components/page-component/app-goods-recommend/app-goods-recommend";
    import appIphoneX from "../../../components/basic-component/app-iphone-x/app-iphone-x";
    import appEmptyBottom from "../../../components/basic-component/app-empty-bottom/app-empty-bottom";
    import AppVipCard from "../../../components/page-component/app-vip-card/app-vip-card";

    export default {
        name: 'detail',

        data() {
            return {
                detail: {},
                attrShow: 0,
                selectAttr: {},
                is_vip: false,
                discount: null,
                is_vip_card_user: 0,
                shareData: {},
                recommend_list: [],
                activity: {},
                shareUrl: '',
                activity_status: 1,
                loading: false,
            }
        },

        components: {
            'app-quick-navigation': appQuickNavigation,
            appGoodsBanner,
            appGoodsPrice,
            appGoodsAttr,
            appAttr,
            appGoodsMarketing,
            appJumpButton,
            'app-goods-list': appGoodsList,
            'app-goods-service': appService,
            'app-goods-detail': appGoodsDetail,
            'app-goods-recommend': appGoodsRecommend,
            appIphoneX,
            appEmptyBottom,
            AppVipCard
        },

        methods: {
            async getDetail(id) {
                this.loading = false;
                this.$showLoading();
                const e = await this.$request({
                    url: this.$api.pick.goods,
                    method: 'get',
                    data: {
                        id: id
                    }
                });
                if (e.code === 0) {
                    this.detail = e.data.detail;
                    this.activity = e.data.activity;
                    this.recommend_list = e.data.list;
                    this.shareUrl = `${this.$api.pick.poster}&goods_id=${this.detail.id}`;
                    this.activity_status = e.data.activity_status;
                }
                this.loading = true;
                this.$hideLoading();
            },

            onAttr(data) {
                this.selectAttr = data;
            },
            quickShare(info) {
                this.shareData = info;
            },
            clickAttr(status) {
                if (this.activity_status !== 1) return;
                if (status === 1) {
                    this.attrShow = Math.random();
                } else {
                    uni.navigateTo({
                        url: `/plugins/pick/pond/pond?rule_num=${this.activity.rule_num}&pick_activity_id=${this.activity.id}`
                    })
                }
            },
            async add(data, number) {
                const e = await this.$request({
                    url: this.$api.pick.add,
                    data: {
                        goods_id: data.goods_id,
                        attr: data.id,
                        num: number,
                        pick_activity_id: this.activity.id
                    }
                });
                if (e.code === 0) {
                    uni.navigateBack();
                }
            },

            back() {
                uni.navigateTo({
                    url: '/plugins/pick/index/index'
                });
            },

            favorite() {
                let url = this.$api.user.favorite_add;
                let favorite = true;
                if (this.detail.favorite) {
                    url = this.$api.user.favorite_remove;
                    favorite = false;
                }
                this.detail.favorite = favorite;
                this.$request({
                    url: url,
                    data: {
                        goods_id: this.detail.id,
                    }
                }).then(response => {
                    if (response.code === 0) {
                    } else {
                        uni.showModal({
                            title: '提示',
                            content: response.msg,
                            showCancel: false,
                        });
                    }
                }).catch(e => {
                });
            }
        },

        onLoad(options) {
            this.getDetail(options.goods_id);
        }
    }
</script>

<style scoped lang="scss">
    .detail {

    }

    .goods-name {
        padding: #{24rpx 24rpx 0 24rpx};
        background-color: #ffffff;
        color: $uni-important-color-black;
    }

    .price {
        padding-top: #{24rpx};
        background-color: #ffffff;
    }

    .button {
        width: 50%;
        height: 100%;
        color: #ffffff;
    }

    .app-bottom {
        width: 100%;
        height: #{110rpx};
        font-size: $uni-font-size-general-one;
        background-color: #ffffff;
    }

    .little {
        width: #{110rpx};
        height: 100%;
        background-color: #ffffff;
        font-size: #{20rpx};
        color: $uni-general-color-two;

        &:first-child {
            border-right: #{1rpx} solid #e2e2e2;
        }

        image {
            width: #{40rpx};
            height: #{40rpx};
            display: block;
            margin-bottom: #{10rpx};
        }
    }

    .rule {
        width: #{750upx};
        height: #{66upx};
        padding: #{0 24upx};
        background-color: #ffffff;
        .content {
            width: #{702upx};
            background-color: #fff0f0;
            height: #{66upx};
            padding: #{0 24upx};
        }
        .tag {
            width: #{90upx};
            height: #{28upx};
            border-radius: #{13upx};
            font-size: #{19upx};
            line-height: #{28upx};
            background-color: #ff4544;
            color: #ffffff;
            padding: #{0 10upx};
        }
        .activity-price {
            font-size: #{23upx};
            margin-left: #{17upx};
        }
        .go {
            >view {
                font-size: #{23upx};
                color: #999999;
            }
            >image {
                width: #{12upx};
                height: #{22upx};
                margin-left: #{14upx};
            }
        }
    }
</style>